<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
    <link rel="stylesheet" href="https://jqweui.cn/dist/demos/css/demos.css">
</head>

<body>

    <header class='demos-header'>
        <h1 class="demos-title">预约</h1>
    </header>

    <div class="weui-cells__title">基本信息</div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label for="name" class="weui-label">姓名</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="name" type="text" value="" placeholder="请输入姓名">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label for="phone" class="weui-label">手机</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="phone" type="text" value="" placeholder="请输入手机号码">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label for="clinic" class="weui-label">门店</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="clinic" type="text" value="" placeholder="请选择门店">
            </div>
        </div>
        <div class="weui-cell" id="d" style="display: none;">
            <div class="weui-cell__hd"><label for="doctor" class="weui-label">医生</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="doctor" type="text" value="" placeholder="请选择医生">
            </div>
        </div>
        <div class="weui-cell" id="t" style="display: none;">
            <div class="weui-cell__hd"><label for="doctor" class="weui-label">到店时间</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="time" type="text" value="" placeholder="请选择到店时间">
            </div>
        </div>


        <div class="weui-cells__title">描述</div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <textarea class="weui-textarea" placeholder="请简要描述症状" rows="3" id="ask"></textarea>
                </div>
            </div>
        </div>

    </div>
    <input type="hidden" id="cid" name="cid" />
    <input type="hidden" id="did" name="did" />

    <a href="javascript:;" class="weui-btn weui-btn_primary" id="submit">提交</a>

    <div id="picker-container"></div>

    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
    <script>
        $.ajax({
            url: "http://123.206.221.45/Api/getClinic",
            type: 'GET',
            dataType: "jsonp",
            success: function (data) {
                if (data.code == 0) {
                    var value = new Array();
                    var displayValue = new Array();
                    $.each(data.data, function (i, item) {
                        value.push(item.name + "(" + item.id + ")");
                        displayValue.push(item.name);
                    })
                    $("#clinic").picker({
                        title: "请选择门店",
                        cols: [
                            {
                                textAlign: 'center',
                                values: value,
                                displayValues: displayValue
                            }
                        ],
                        onClose: function (result) {
                            var reg = /.*\([^\)\(\d]*(\d+)[^\)\(\d]*\).*/;
                            cid = result.value[0].replace(reg, "$1");
                            $("#cid").val(cid)
                            $.ajax({
                                url: "http://123.206.221.45/Api/getDoctorByCid",
                                type: 'GET',
                                dataType: "jsonp",
                                data: "id=" + cid,
                                success: function (data) {
                                    var valued = new Array();
                                    var displayValued = new Array();
                                    $.each(data.data, function (i, item) {
                                        valued.push(item.name + "(" + item.id + ")" + "[电话：" + item.phone + "]");
                                        displayValued.push(item.name);
                                    })
                                    $("#doctor").picker({
                                        title: "请选择医生",
                                        cols: [
                                            {
                                                textAlign: 'center',
                                                values: valued,
                                                displayValues: displayValued
                                            }
                                        ],
                                        onClose: function (result) {
                                            var reg = /.*\([^\)\(\d]*(\d+)[^\)\(\d]*\).*/;
                                            did = result.value[0].replace(reg, "$1");
                                            $("#did").val(did);
                                            $("#time").datetimePicker();
                                            $("#t").removeAttr("style")
                                        }
                                    });
                                    $("#d").removeAttr("style")
                                }
                            });
                        }
                    });
                } else $.toast("服务器错误:" + data.msg, "forbidden");
            }
        });
        $("#submit").click(function () {
            var name = $("#name").val();
            var phone = $("#phone").val();
            var did = $("#did").val();
            var time = $("#time").val();
            var ask = $("#ask").val();
            if (name == "") $.toast("姓名不能为空，请重新输入", "text");
            else if (!(/^1[3456789]\d{9}$/.test(phone))) $.toast("手机号码有误，请重新输入", "text");
            else if (did == "") $.toast("您还未选择医生，请先选择", "text");
            else if (time == "") $.toast("您还未选择到店时间，请先选择", "text");
            else if (ask == "") $.toast("您还未输入症状，请重新输入", "text");
            else $.ajax({
                url: "http://123.206.221.45/Api/submitAppo",
                type: 'GET',
                dataType: "jsonp",
                data: {name:name,phone:phone,did:did,time:time,ask:ask},
                beforeSend:function(){
                    $.showLoading("正在提交");
                },
                success:function(data){
                    if(data.code==0){
                        $.hideLoading();
                        $(location).prop('href', 'success.html?no='+data.data.appoId)
                    }else $.toast("服务器错误:" + data.msg, "forbidden");
                }

            })


        });

    </script>
</body>

</html>